<template>
  <div>
    <basic-layout :title="this.title" :showFilterBtn="false" :showAddBtn="false"
                  @handleFilter="$refs.queryPopupRef.show = true">
      <!-- 列表 -->
      <van-row class="listCard">
        <van-pull-refresh
          v-if="dataList.length"
          class="cardVanPullRefresh1"
          v-model="refreshing"
          @refresh="onRefresh">
          <van-list
            v-if="dataList.length > 0"
            v-model="loading"
            :finished="finished"
            finished-text="已经到底啦"
            @load="nextPage"
            :mmediate-check="false"
            :offset="100"
          >
            <div v-for="item in dataList" class="dataStyle" v-if="dataList.length > 0">
              <div class="hengXian">
                <div class="dataBStyle">
                  <div class="listLeft">
                    <span class="ziti">{{ title }}</span>
                  </div>
                  <div class="dh" style="color: #aaaaaa">
                    <span v-if="!item.SWID" >无</span>
                    <span v-else ></span>{{ item.SWID }}
                    <div class="aImgStyle1">
                      <span v-if="item.PDJG === '01'" style="color: red">盘亏</span>
                      <span v-if="item.PDJG === '02'" style="color: green">正常</span>
                      <span v-if="item.PDJG === '03'" class="imgStyle" v-else style="color: blue">盘盈</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="listMain">
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">型号:&nbsp;&nbsp;&nbsp;</span>{{
                    item.XINGH
                  }}
                </div>
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">区域:&nbsp;&nbsp;&nbsp;</span>
                  <span
                    v-if="item.FANGCNAME && item.FANGCNAME != null">{{ item.FANGCNAME }}</span>
                  <span
                    v-if="item.LOUCNAME && item.LOUCNAME != null">-{{ item.LOUCNAME }}层</span>
                  <span
                    v-if="item.FANGJNAME && item.FANGJNAME != null">-{{ item.FANGJNAME }}</span>
                </div>
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">分类:&nbsp;&nbsp;&nbsp;</span>
                  <span v-if="item.WZDLMC && item.WZDLMC != null">{{ item.WZDLMC }}</span>
                  <span> / </span>
                  <span v-if="item.WZXLMC && item.WZXLMC != null">{{ item.WZXLMC }}</span>
                </div>
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">时间:&nbsp;&nbsp;&nbsp;</span>{{
                    item.PDRQ
                  }}
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
        <div class="btnBox">
          <van-button type="primary" color="#4eb3e9" size="large" @click="jumpToAreaList">重新盘点</van-button>
        </div>
      </van-row>
    </basic-layout>
  </div>
</template>
<script>
import { queryPandjg } from '@/api/srvAssurance/assetLabel/assetLabel'

export default {
  components: {},
  data () {
    return {
      inputSearchValue: '',
      title:'',
      active: 0,
      dataList: [],
      loading: false,
      finished: false,
      refreshing: false,
      queryParam: {
        id: '',
        pdjhid: '',
        pageIndex: 1,
        pageSize: 10,
      },
      dataInfo: {},
    }
  },

  created () {
    var dataInfo = this.$route.query.dataInfo

    if (JSON.stringify(dataInfo) != '"[object Object]"') {
      this.queryParam.pdjhid = dataInfo.ID || ''
      this.dataInfo = dataInfo
      sessionStorage.setItem('materialInventory-dataInfo', JSON.stringify(dataInfo))
    } else {
      var item = sessionStorage.getItem('materialInventory-dataInfo')
      var dataParse = JSON.parse(item)
      this.queryParam.pdjhid = dataParse.ID || ''
      this.dataInfo = dataParse
    }
    this.initData()
    this.title=this.dataInfo.JHMC
    console.log(this.dataInfo.JHMC)
  },

  methods: {
    onRefresh () {
      this.initData()
    },

    async initData () {
      this.queryParam.pageIndex = 1
      this.finished = false
      this.refreshing = true
      await this.getDataList()
      this.refreshing = false
    },

    async refresh () {
      this.finished = false
      this.refreshing = true
      await this.getDataList()
      this.refreshing = false
    },

    // 加载下一页
    nextPage () {
      // 判断第一次查出来的数据是否还有下一页数据，如果没有则不调接口
      if (this.dataList.length < (this.queryParam.pageIndex * this.queryParam.pageSize)) {
        this.finished = true
        return
      }
      setTimeout(() => {
        this.queryParam.pageIndex += 1
        this.getDataList()
      }, 1000)
    },

    async getDataList () {
      this.loading = true
      let res = await queryPandjg(this.queryParam)

      if (res.status == 0) {
        if (this.queryParam.pageIndex == 1) {
          // 清空列表数据
          this.dataList = []
        }
        this.dataList = this.dataList.concat(res.data)
        // 如果数据加载完毕，finished 标志位置为 true，滑到页面底部则不会再触发 nextPage() 方法了。
        if (this.dataList.length >= res.totalCount) {
          this.finished = true
        }
      }
      this.loading = false
    },

    tabClick (val) {
      if (val == 0) {
        this.queryParam.jhzt = '02'
      } else {
        this.queryParam.jhzt = '03'
      }
      this.dataList = []
      this.initData()
    },

    jumpToAreaList () {
      this.$router.push({
        path: '/materialInventory/areaList',
        query: {
          dataInfo: this.dataInfo
        }
      })
    },

  }
}
</script>

<style scoped lang="less">

.listCard {
  height: calc(100% - 1px);
  width: 100%;
  z-index: 999;
  overflow: auto;
  justify-content: flex-start;
  align-items: center;
  background-color: #8080803b;

  .btnBox {
    position: absolute;
    width: 100%;
    height: 50px;
    text-align: center;
  }
  .cardVanPullRefresh1 {
    .dataStyle {
      height: 176px;
      margin: 10px;
      background-color: #FFFFFF;
      line-height: 23px;
      border-radius: 3px;
      font-size: 0.4rem;

      .hengXian {
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
        line-height: 0.64rem;
      }

      .dataBStyle {
        height: 55px;
        position: relative;

        .listLeft {
          margin-left: 10px;
          font-size: 0.4rem;
          font-weight: bold;
          padding-top: 9px;

          .ziti {
            margin-top: 1px;
          }

        }

        .dh {
          margin-left: 10px;
          font-size: 0.3rem;

          .aImgStyle1 {
            position: absolute;
            top: 0.4667rem;
            right: 0.68rem;
            font-size: 15px;
            margin-left: 78%;
          }
        }
      }


      .listMain {
        line-height: 29px;
        position: relative;

        .downOtherProcess {
          width: 80%;
          float: left;
        }

        .downOtherText {
          transform: translateY(-5px);
          width: 100%;
        }
      }
    }

    /deep/ .van-progress__pivot {
      display: none;
    }

    /deep/ .van-progress {
      height: 11px;
      margin-top: 4px;
    }

    .custom-image {
      height: 100%;
    }
  }
}

/deep/ .van-tabs__wrap {
  color: #FFFFFF;
  background-color: #FF8917;
  border-radius: 10px;
  height: 40px;
}

/deep/ .van-tabs__line {
  background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgb(14 92 216)), to(rgba(14, 92, 216, 0.53)));
  width: 40%;
  height: 4px;
  border-radius: 40px;
}

/deep/ .van-tabs__nav {
  background-color: #FFFFFF;
}

/deep/ .van-progress__pivot {
  display: none;
}

/deep/ .van-progress {
  height: 11px;
  margin-top: 4px;
}
.btnBox /deep/ .van-button--large {
}

.van-button--large {
  height: 40px;
  line-height: 40px;
  width: 95%;
  margin: 10px auto;
}
</style>
